<template>
  <div class="app-container">
    <el-card>
      <div class="flex justify-between items-center mb-4">
        <h2>项目管理</h2>
        <el-button type="primary" @click="handleAdd">新增项目</el-button>
      </div>

      <el-table :data="tasks" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="name" label="项目名称" min-width="120">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleEdit(scope.row)">{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>
        
        <el-table-column prop="type" label="项目类型" width="120">
          <template slot-scope="scope">
            <el-tag :type="getProjectTypeType(scope.row.type)" size="small">
              {{ getProjectTypeText(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="baseImage" label="基础镜像"></el-table-column>
        
        <el-table-column prop="deployType" label="执行方式" width="120">
          <template slot-scope="scope">
            <el-tag :type="getDeployTypeType(scope.row.deployType)" size="small">
              {{ getDeployTypeText(scope.row.deployType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="140">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)" size="small">
              {{ scope.row.status || '未知' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="healthStatus" label="健康状态" width="140">
          <template slot-scope="scope">
            <el-tag :type="getHealthStatusType(scope.row.healthStatus)" size="small">
              {{ scope.row.healthStatus || '未知' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="100">
          <template slot-scope="scope">
            {{ formatTime(scope.row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="small" @click="handleExecute(scope.row)">执行</el-button>
            <el-button size="small" @click="handleLog(scope.row)">日志</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 日志 Drawer -->
    <el-drawer :visible.sync="drawerVisible" title="项目日志" size="40%">
      <el-scrollbar height="300px">
        <p v-for="(line, i) in logs" :key="i">{{ line }}</p>
      </el-scrollbar>
    </el-drawer>

    <!-- 上传项目弹窗 -->
    <el-dialog :visible.sync="uploadDialogVisible" width="600px" :close-on-click-modal="false"
      :close-on-press-escape="false" :show-close="true">

      <template slot="title">
        <div class="dialog-title-custom">
          <h2>上传项目，一键部署</h2>
        </div>
      </template>

      <el-steps :active="currentStep" align-center class="mb-6">
        <el-step title="基本信息"></el-step>
        <el-step title="资源配额"></el-step>
        <el-step title="环境变量"></el-step>
      </el-steps>

      <!-- 步骤1: 基本信息 -->
      <div v-show="currentStep === 0">
        <el-form :model="uploadForm" :rules="uploadRules" ref="uploadFormRef" label-width="100px">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="uploadForm.name" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <el-form-item label="项目描述">
            <el-input type="textarea" v-model="uploadForm.description" placeholder="请输入项目描述" :rows="3">
            </el-input>
          </el-form-item>
          <el-form-item label="项目类型" prop="type">
            <el-radio-group v-model="uploadForm.type" @change="handleTypeChange">
              <el-radio label="image">镜像文件</el-radio>
              <el-radio label="code">源代码</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="基础镜像" prop="baseImage" v-if="uploadForm.type === 'code'" required>
            <el-select v-model="uploadForm.baseImage" placeholder="请选择基础镜像" style="width: 100%">
              <el-option 
                v-for="image in baseImages" 
                :key="image.id" 
                :label="image.label" 
                :value="image.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部署方式" prop="deployType">
            <el-radio-group v-model="uploadForm.deployType">
              <el-radio label="manual">手动执行</el-radio>
              <el-radio label="auto">自动执行</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="upload-area">
          

          <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple
            :on-change="handleFileChange" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">内网环境，镜像文件或源代码应包含所需的依赖，文件格式为.tar</div>
          </el-upload>
        </div>
        
      </div>

      <!-- 步骤2: 资源配额 -->
      <div v-show="currentStep === 1" class="resource-step">
        <el-form :model="uploadForm" label-width="120px" class="resource-form">
          <el-form-item label="CPU配额">
            <div class="flex items-center justify-center">
              <el-input-number v-model="uploadForm.cpu" :min="0.1" :max="16" :step="0.1" placeholder="CPU核心数" class="resource-input">
              </el-input-number>
              <span class="ml-4 text-gray-500 resource-unit">核心</span>
            </div>
          </el-form-item>
          <el-form-item label="内存配额">
            <div class="flex items-center justify-center">
              <el-input-number v-model="uploadForm.memory" :min="1" :max="uploadForm.memoryUnit === 'GiB' ? 32 : 32768" :step="1" placeholder="内存大小" class="resource-input">
              </el-input-number>
              <el-select v-model="uploadForm.memoryUnit" @change="handleMemoryUnitChange" class="ml-4" style="width: 80px">
                <el-option label="MiB" value="MiB"></el-option>
                <el-option label="GiB" value="GiB"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="存储配额">
            <div class="flex items-center justify-center">
              <el-input-number v-model="uploadForm.storage" :min="1" :max="1000" :step="1" placeholder="存储大小" class="resource-input">
              </el-input-number>
              <span class="ml-4 text-gray-500 resource-unit">GiB</span>
            </div>
          </el-form-item>
          <el-form-item label="GPU配额">
            <div class="flex items-center justify-center">
              <el-input-number v-model="uploadForm.gpu" :min="0" :max="8" :step="1" placeholder="GPU数量" class="resource-input">
              </el-input-number>
              <span class="ml-4 text-gray-500 resource-unit">个</span>
            </div>
          </el-form-item>
          <el-form-item label="显存配额" v-if="uploadForm.gpu > 0">
            <div class="flex items-center justify-center">
              <el-input-number v-model="uploadForm.gpuMemory" :min="1" :max="uploadForm.gpuMemoryUnit === 'GiB' ? 64 : 65536" :step="1" placeholder="显存大小" class="resource-input">
              </el-input-number>
              <el-select v-model="uploadForm.gpuMemoryUnit" @change="handleGpuMemoryUnitChange" class="ml-4" style="width: 80px">
                <el-option label="MiB" value="MiB"></el-option>
                <el-option label="GiB" value="GiB"></el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤3: 环境变量 -->
      <div v-show="currentStep === 2">
        <el-form :model="uploadForm" label-width="100px">
          <el-form-item label="环境变量">
            <div class="env-vars-container">
              <div v-for="(env, index) in uploadForm.environmentVars" :key="index"
                class="env-var-item flex items-center mb-2">
                <el-input v-model="env.key" placeholder="变量名" class="mr-2" style="width: 45%">
                </el-input>
                <el-input v-model="env.value" placeholder="变量值" class="mr-2" style="width: 45%">
                </el-input>
                <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="removeEnvVar(index)">
                </el-button>
              </div>
              <el-button type="primary" icon="el-icon-plus" @click="addEnvVar" size="small">添加环境变量</el-button>
            </div>
          </el-form-item>
          
          <el-form-item label="运行指令">
            <div class="run-commands-container">
              <div v-for="(cmd, index) in uploadForm.runCommands" :key="index"
                class="run-command-item flex items-center mb-2">
                <el-input v-model="cmd.command" placeholder="请输入运行指令" class="mr-2" style="width: 85%">
                </el-input>
                <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="removeRunCommand(index)">
                </el-button>
              </div>
              <el-button type="primary" icon="el-icon-plus" @click="addRunCommand" size="small">添加运行指令</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpload" v-if="currentStep === 0">取消</el-button>
        <el-button @click="prevStep" v-if="currentStep > 0">上一步</el-button>
        <el-button @click="nextStep" type="primary" v-if="currentStep < 2">下一步</el-button>
        <el-button @click="submitUpload" type="primary" v-if="currentStep === 2">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listTasks, updateTask, delTask, executeTask, uploadProject } from "@/api/package/task";
import { listBaseImages } from "@/api/package/image";

export default {
  name: 'TaskManagement',
  data() {
    return {
      tasks: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      drawerVisible: false,
      logs: [],
      dialogVisible: false,
      dialogTitle: "",
      form: {
        id: undefined,
        name: "",
        type: "手动",
        cron: ""
      },
      rules: {
        name: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
        type: [{ required: true, message: "执行方式不能为空", trigger: "blur" }],
        cron: [{ required: true, message: "Cron表达式不能为空", trigger: "blur" }]
      },
      // 上传项目弹窗相关数据
      uploadDialogVisible: false,
      currentStep: 0,
      baseImages: [], // 基础镜像列表
      uploadForm: {
        name: "",
        description: "",
        type: "image",
        deployType: "manual",
        baseImage: "",
        cpu: 1,
        memory: 512,
        memoryUnit: "MiB",
        storage: 10,
        gpu: 0,
        gpuMemory: 1024,
        gpuMemoryUnit: "MiB",
        environmentVars: [
          { key: "", value: "" }
        ],
        runCommands: [
          { command: "" }
        ]
      },
      uploadRules: {
        name: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
        description: [{ required: true, message: "项目描述不能为空", trigger: "blur" }],
        type: [{ required: true, message: "项目类型不能为空", trigger: "change" }],
        deployType: [{ required: true, message: "部署方式不能为空", trigger: "change" }],
        baseImage: [
          { 
            validator: (rule, value, callback) => {
              if (this.uploadForm.type === 'code' && !value) {
                callback(new Error('请选择基础镜像'));
              } else {
                callback();
              }
            }, 
            trigger: 'change' 
          }
        ]
      },
      fileList: []
    }
  },
  mounted() {
    this.getTaskList();
  },
  methods: {
    // 获取项目列表 - 一次性获取所有数据，前端分页
    async getTaskList() {
      try {
        // 不发送分页参数，获取所有数据
        const response = await listTasks();
        
        // 处理响应数据
        let allTasksData = [];
        
        // 处理不同的响应结构
        if (response && typeof response === 'object') {
          // 标准响应结构：{ code: 200, data: { rows: [], total: 100 } }
          if (response.code === 200 && response.data) {
            allTasksData = response.data.rows || response.data.list || response.data || [];
          }
          // 标准响应结构：{ code: 200, rows: [], total: 100 }
          else if (response.code === 200) {
            allTasksData = response.rows || response.list || response.data || [];
          }
          // 直接返回分页结构：{ rows: [], total: 100 }
          else if (response.rows) {
            allTasksData = response.rows;
          }
          // 直接返回分页结构：{ list: [], total: 100 }
          else if (response.list) {
            allTasksData = response.list;
          }
          // 直接返回数组
          else if (Array.isArray(response)) {
            allTasksData = response;
          }
          // 其他未知结构，尝试直接使用
          else {
            allTasksData = response;
          }
        }
        
        // 确保数据是数组
        if (!Array.isArray(allTasksData)) {
          allTasksData = [];
        }
        
        // 设置总数据条数
        this.total = allTasksData.length;
        
        // 前端分页逻辑
        const startIndex = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
        const endIndex = startIndex + this.queryParams.pageSize;
        this.tasks = allTasksData.slice(startIndex, endIndex);
        
      } catch (error) {
        console.error('获取项目列表失败:', error);
        this.$message.error('获取项目列表失败');
        this.tasks = [];
        this.total = 0;
      }
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.getTaskList();
    },

    // 当前页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getTaskList();
    },

    // 新增按钮操作
    handleAdd() {
      this.openUploadDialog();
    },

    // 修改按钮操作
    handleUpdate(row) {
      this.form = { ...row };
      this.dialogTitle = "修改项目";
      this.dialogVisible = true;
    },

    // 编辑按钮操作 - 跳转到编辑页面
    handleEdit(row) {
      this.$router.push(`/task/edit/${row.id}`);
    },

    // 删除按钮操作
    async handleDelete(row) {
      try {
        const taskId = row.id;
        await this.$confirm('确定删除该项目吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        await delTask(taskId);
        this.$message.success('删除成功');
        this.getTaskList();
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除项目失败:', error);
          this.$message.error('删除项目失败');
        }
      }
    },

    // 执行按钮操作
    async handleExecute(row) {
      try {
        const taskId = row.id;
        await executeTask(taskId);
        this.$message.success('项目部署成功');
        this.getTaskList();
      } catch (error) {
        console.error('部署项目失败:', error);
        this.$message.error('部署项目失败');
      }
    },

    handleLog(row) {
      this.logs = [
        `项目 ${row.name} 开始部署...`,
        "拉取镜像...",
        "封装流水线运行中...",
        "任务完成。",
      ];
      this.drawerVisible = true;
    },


    // 上传项目弹窗相关方法
    openUploadDialog() {
      this.uploadDialogVisible = true;
      this.currentStep = 0;
      this.resetUploadForm();
      this.getBaseImages();
    },

    // 获取基础镜像列表
    async getBaseImages() {
      try {
        const response = await listBaseImages();
        
        // 处理API响应数据 - 更健壮的处理逻辑
        let imagesData = [];
        
        // 首先检查响应结构
        if (response && typeof response === 'object') {
          // 标准响应结构：{ code: 200, images: [...] }
          if (response.code === 200 && response.images) {
            imagesData = response.images;
          }
          // 标准响应结构：{ code: 200, data: [...] }
          else if (response.code === 200 && response.data) {
            imagesData = response.data;
          } 
          // 直接返回数组的情况
          else if (Array.isArray(response)) {
            imagesData = response;
          }
          // 其他可能的响应结构
          else if (response.rows) {
            imagesData = response.rows;
          } else if (response.list) {
            imagesData = response.list;
          } else if (response.data && Array.isArray(response.data)) {
            imagesData = response.data;
          }
        }
        
        // 确保数据格式正确，显示为 name:tag 格式
        this.baseImages = imagesData.map((image, index) => {
          // 处理不同的字段名可能性
          const name = image.name || image.repositoryName || image.imageName || image.repoName || '';
          const tag = image.tags || image.tag || image.version || image.imageTag || '';
          
          // 如果name为空，尝试其他字段
          let displayName = '';
          if (name && tag) {
            displayName = `${name}:${tag}`;
          } else if (name) {
            displayName = name;
          } else if (image.fullName) {
            displayName = image.fullName;
          } else if (image.repository) {
            displayName = image.repository + (tag ? `:${tag}` : '');
          } else {
            displayName = `镜像${index + 1}`;
          }
          
          // 确保有唯一标识符
          const id = image.id || image.imageId || image.repositoryId || index;
          const value = image.value || displayName;
          
          return {
            id: id,
            name: displayName,
            value: value,
            label: displayName
          };
        });
      } catch (error) {
        this.$message.error('获取基础镜像列表失败');
        this.baseImages = [];
      }
    },

    resetUploadForm() {
      this.uploadForm = {
        name: "",
        description: "",
        type: "image",
        deployType: "manual",
        baseImage: "",
        cpu: 1,
        memory: 512,
        memoryUnit: "MiB",
        storage: 10,
        gpu: 0,
        gpuMemory: 1024,
        gpuMemoryUnit: "MiB",
        environmentVars: [
          { key: "", value: "" }
        ],
        runCommands: [
          { command: "" }
        ]
      };
    },

    // 处理内存单位变更
    handleMemoryUnitChange(newUnit) {
      if (newUnit === 'GiB' && this.uploadForm.memoryUnit === 'MiB') {
        // 从MiB切换到GiB，数值除以1024
        this.uploadForm.memory = Math.max(1, Math.round(this.uploadForm.memory / 1024));
      } else if (newUnit === 'MiB' && this.uploadForm.memoryUnit === 'GiB') {
        // 从GiB切换到MiB，数值乘以1024
        this.uploadForm.memory = Math.min(32768, this.uploadForm.memory * 1024);
      }
      this.uploadForm.memoryUnit = newUnit;
    },

    // 处理显存单位变更
    handleGpuMemoryUnitChange(newUnit) {
      if (newUnit === 'GiB' && this.uploadForm.gpuMemoryUnit === 'MiB') {
        // 从MiB切换到GiB，数值除以1024
        this.uploadForm.gpuMemory = Math.max(1, Math.round(this.uploadForm.gpuMemory / 1024));
      } else if (newUnit === 'MiB' && this.uploadForm.gpuMemoryUnit === 'GiB') {
        // 从GiB切换到MiB，数值乘以1024
        this.uploadForm.gpuMemory = Math.min(65536, this.uploadForm.gpuMemory * 1024);
      }
      this.uploadForm.gpuMemoryUnit = newUnit;
    },

    // 处理项目类型变更
    handleTypeChange(value) {
      // 当项目类型变更时，重置基础镜像选择
      if (value === 'image') {
        this.uploadForm.baseImage = '';
      }
    },

    // 下一步
    nextStep() {
      if (this.currentStep === 0) {
        // 验证基本信息
        this.$refs.uploadFormRef.validate((valid) => {
          if (valid) {
            this.currentStep++;
          }
        });
      } else {
        this.currentStep++;
      }
    },

    // 上一步
    prevStep() {
      this.currentStep--;
    },

    // 取消上传
    cancelUpload() {
      this.uploadDialogVisible = false;
      this.resetUploadForm();
    },

    // 添加环境变量
    addEnvVar() {
      this.uploadForm.environmentVars.push({ key: "", value: "" });
    },

    // 删除环境变量
    removeEnvVar(index) {
      this.uploadForm.environmentVars.splice(index, 1);
    },

    // 添加运行指令
    addRunCommand() {
      this.uploadForm.runCommands.push({ command: "" });
    },

    // 删除运行指令
    removeRunCommand(index) {
      this.uploadForm.runCommands.splice(index, 1);
    },

    // 处理文件变化
    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },

    // 处理文件移除
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },

    // 提交上传
    async submitUpload() {
      try {
        // 获取当前登录用户信息
        const userInfo = JSON.parse(localStorage.getItem("honey-user") || '{}');
        
        // 过滤掉空的环境变量
        const filteredEnvVars = this.uploadForm.environmentVars.filter(
          env => env.key.trim() !== "" && env.value.trim() !== ""
        );

        // 过滤掉空的运行指令
        const filteredRunCommands = this.uploadForm.runCommands.filter(
          cmd => cmd.command.trim() !== ""
        );

        const uploadData = {
          ...this.uploadForm,
          environmentVars: filteredEnvVars,
          runCommands: filteredRunCommands,
          // 添加用户ID
          creatorId: userInfo.id
        };

        // 调用上传项目的API
        await uploadProject(uploadData);

        this.$message.success('项目上传成功');
        this.uploadDialogVisible = false;
        this.getTaskList();
      } catch (error) {
        console.error('上传项目失败:', error);
        this.$message.error('上传项目失败');
      }
    },

    // 获取执行方式显示文本
    getDeployTypeText(deployType) {
      const deployTypeMap = {
        'auto': '自动',
        'manual': '手动'
      };
      return deployTypeMap[deployType] || deployType || '未知';
    },

    // 获取执行方式标签类型
    getDeployTypeType(deployType) {
      const typeMap = {
        'auto': 'success',
        'manual': 'primary'
      };
      return typeMap[deployType] || 'info';
    },

    // 获取状态标签类型
    getStatusType(status) {
      const statusMap = {
        'running': 'success',
        'failed': 'danger',
        'stopped': 'warning',
        'completed': 'info',
        '未知': 'info'
      };
      return statusMap[status] || 'info';
    },

    // 获取健康状态标签类型
    getHealthStatusType(status) {
      const statusMap = {
        'healthy': 'healthy',
        '未知': 'info'
      };
      return statusMap[status] || 'info';
    },

    // 获取项目类型显示文本
    getProjectTypeText(type) {
      const typeMap = {
        'image': '镜像文件',
        'code': '源代码'
      };
      return typeMap[type] || type || '未知';
    },

    // 获取项目类型标签类型
    getProjectTypeType(type) {
      const typeMap = {
        'image': 'primary',
        'code': 'success'
      };
      return typeMap[type] || 'info';
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return '-';
      try {
        const date = new Date(time);
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        });
      } catch (error) {
        return time;
      }
    }
  }
}
</script>

<style scoped>
.dialog-title-custom {
  text-align: center;
  margin: 0;
  padding: 0;
}

.dialog-title-custom h2 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  color: #303133;
}

.env-vars-container {
  max-height: 200px;
  overflow-y: auto;
}

.env-var-item {
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.env-var-item:last-child {
  border-bottom: none;
}

.dialog-footer {
  text-align: right;
  padding: 20px 0 0;
}

.upload-area {
  padding: 0px 0px;
  margin-bottom: 30px;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 资源配额步骤样式 */
.resource-step {
  margin-top: 20px;
  text-align: center; /* 整个资源配额内容居中 */
}

.resource-form {
  display: inline-block; /* 使表单内容居中 */
  text-align: left; /* 表单内部内容左对齐 */
  padding: 0 40px; /* 增加左右间距 */
  width: 100%;
  max-width: 500px; /* 限制最大宽度，使内容更紧凑 */
}

.resource-form .el-form-item {
  margin-bottom: 20px;
}

.resource-form .el-form-item__label {
  text-align: left; /* 字段标签左对齐 */
  font-weight: 500;
  color: #606266;
}

.resource-input {
  text-align: left; /* 输入框内容左对齐 */
  margin-right: 32px; /* 增加输入框和单位之间的间距 */
}

.resource-unit {
  text-align: left; /* 单位文本左对齐 */
  min-width: 60px; /* 增加单位文本的最小宽度 */
  display: inline-block;
  margin-left: 8px; /* 增加单位文本的左边距 */
}

/* 调整资源配额输入区域的布局 */
.resource-form .flex {
  justify-content: flex-start; /* 左对齐 */
  align-items: center;
  gap: 12px; /* 增加各元素之间的间距 */
}

.resource-form .el-input-number {
  width: 140px; /* 增加输入框宽度 */
}

.resource-form .el-select {
  width: 90px; /* 增加选择框宽度 */
}

/* 增加表单项之间的垂直间距 */
.resource-form .el-form-item {
  margin-bottom: 24px; /* 增加表单项之间的间距 */
}

/* 分页样式 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
  padding: 10px 0;
}
</style>
